<template>
    <div class="confirmOrder">
         
        <div class="mui-content">
			<div class="mui-card " id="firstCard">
				<div class="mui-card-content timeAndPay">
					<div class="mui-card-content-inner">
                        <span>送达时间</span>
                        <span>2018-11-11 22:11:11</span>
                        
					</div>
                    
                    <div class="mui-card-content-inner">
						<span>支付方式</span>
                        <span class="pay">支付宝</span>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="goods" v-for="(item,key) in orderData" :key="key">
                            <div class="foodsImg">
                                <img :src="item.goods.img" alt="" >
                            </div>
                            <div class="title">{{item.goods.name}}</div>
                            <div class="count">{{item.count}}份</div>
                            <div class="total">￥{{item.total}}</div>
                        </div>
					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>
        </div>    
    </div>
    

</template>


<script>
export default {
    data(){
        return {
            orderData:null,
            resturantId:null,
            resturantName:null
        }
    },
    methods:{
        orderDataHandle(datas){
            if(datas == null){
                return null;
            }
            let result = {};
            for(key of datas){
                let data = datas[key];
                let count = data.count
                if(!(count >0)){
                    continue;
                }                
                
                let price = data["goods"]["price"];
                let total = (count*price).toFixed(2);
                data["total"] = total;
                result.push(data);
            }
            return result;
        }
       
    },
     created() {
            let key = this.$route.query.key;
            const dataStr = sessionStorage.getItem(key);
            if(dataStr!=null){
                let exData = JSON.parse(dataStr);
                let origent = exData["orderData"];
                this.orderData =  this.orderDataHandle(origent);
                this.resturantId = exData["resturantId"];
                this.resturantName = exData["resturantName"];
            }  
        },
    filters:{
        totalHandle(data){
            let result = parseFloat(data).toFixed(2);
            if(isNaN(result)){
               return  "0"
            }
            return result;
        }
    }
}
</script>


<style lang="less" scoped>
    .goods{
        
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        height: 15vw;
        .foodsImg{
            width: 15vw;
            height:15vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            width: 60vw;
            height:100%;
            //background-color: aqua;
            padding-left: 5vw;
            line-height: 15vw;
            text-align: left;
            font-size: 15px;
        }
        .count{
             width: 15vw;
             height:100%;
            //background-color: red;
             line-height: 15vw;
              text-align: center;

        }
        .total{
             width: 10vw;
            height:100%;
            //background-color:violet;
             line-height: 15vw;
            text-align: center;
             color: red;
            font-family: PingFang SC,Helvetica Neue,Arial,sans-serif;
        }
    }


    .timeAndPay{
        .mui-card-content-inner{
            display: flex;
            justify-content: space-between;
            border: 1px solid #eee;
        }

        .pay{
            color: blue;
        }
        
    }

    .confirmOrder{
        height: 100%;
        background-color: #efeff4;
        padding-top: 15px;
    }
    #firstCard{
        margin-top: 0px;
        
    }

    .mui-content{
        height: 100%;
    }
</style>
